<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://d3js.org/topojson.v0.min.js"></script>
</head>
<style>
    path {
        stroke: white;
        stroke-width: 0.5px;
        fill: grey;
    }

    .stateTN {
        fill: red;
    }

    .stateAP {
        fill: blue;
    }

    .stateMP {
        fill: green;
    }
</style>

<body>
    <script>
        var width = 600;
        var height = 400;
        var projection = d3.geo.mercator()
            .center([78, 22])
            .scale(680)
            .translate([width / 2, height / 2]);

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

        var path = d3.geo.path()
            .projection(projection);
    </script>

</body>

</html>